<template>
  <div>
    <div class="input-group">
      <input v-model="newItem" @keyup.enter="addItem" type="text" class="input form-control" placeholder="add shopping list item">
      <span class="input-group-btn">
        <button @click="addItem" class="btn btn-default" type="button">Add!</button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data () {
    return {
      newItem: ''
    }
  },
  methods: {
    addItem () {
      var text = this.newItem.trim()

      if (text) {
        this.$emit('add', this.newItem)
        this.newItem = ''
        this.$store.dispatch('updateList', this.id)
      }
    }
  }
}
</script>

<style scoped>
</style>
